<ion-header >
<ion-toolbar>
  <ion-title>ionic组件</ion-title>
  <ion-button slot="end" size="small">浏览</ion-button>
</ion-toolbar>
</ion-header>

<ion-content >


  <!--list组件开始-->
  <!--<ion-list>-->
  <!--<ion-item>-->

    <!--<ion-label> 元素1</ion-label>-->

    <!--<ion-icon name="arrow-forward-circle-outline"></ion-icon>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
    <!--<ion-label> 元素2</ion-label>-->

    <!--<ion-icon name="body-outline"></ion-icon>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
    <!--<ion-label> 元素3</ion-label>-->

    <!--<ion-button>加入</ion-button>-->
  <!--</ion-item>-->

<!--</ion-list>-->
  <!--list组件结束-->

  <!--卡片组件开始-->
  <!--<ion-card>-->
    <!--<ion-card-header>-->
      <!--<ion-card-title>主标题</ion-card-title>-->
      <!--<ion-card-subtitle>副标题</ion-card-subtitle>-->
    <!--</ion-card-header>-->
    <!--<ion-card-content>-->

      <!--<ion-list>-->
      <!--<ion-item>-->

      <!--<ion-label> 联系电话</ion-label>-->

      <!--<ion-icon name="arrow-forward-circle-outline"></ion-icon>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
      <!--<ion-label> 收货地址</ion-label>-->

      <!--<ion-icon name="body-outline"></ion-icon>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
      <!--<ion-label> 元素3</ion-label>-->

      <!--<ion-button>加入</ion-button>-->
      <!--</ion-item>-->

      <!--</ion-list>-->
      <!---->
    <!--</ion-card-content>-->

  <!--</ion-card>-->

  <!--卡片组件结束-->
<!--复选框开始-->
  <!--<ion-list>-->
    <!--<ion-item >-->
      <!--<ion-label>选项1</ion-label>-->
      <!--<ion-checkbox slot="end" ></ion-checkbox>-->
    <!--</ion-item>-->

    <!--<ion-item >-->
      <!--<ion-label>选项2</ion-label>-->
      <!--<ion-checkbox slot="end" ></ion-checkbox>-->
    <!--</ion-item>-->

    <!--<ion-item >-->
      <!--<ion-label>选项3</ion-label>-->
      <!--<ion-checkbox slot="end" ></ion-checkbox>-->
    <!--</ion-item>-->

  <!--</ion-list>-->
<!--复选框结束-->


 <!--单选框开始-->
  <!--<ion-list>-->
    <!--<ion-radio-group value="biff">-->
      <!--<ion-list-header>-->
        <!--<ion-label>你中午想吃什么</ion-label>-->
      <!--</ion-list-header>-->

      <!--<ion-item>-->
        <!--<ion-label>米线</ion-label>-->
        <!--<ion-radio slot="start" value="biff"></ion-radio>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
        <!--<ion-label>面条</ion-label>-->
        <!--<ion-radio slot="start" value="griff"></ion-radio>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
        <!--<ion-label>炒饭</ion-label>-->
        <!--<ion-radio slot="start" value="buford"></ion-radio>-->
      <!--</ion-item>-->
    <!--</ion-radio-group>-->
  <!--</ion-list>-->
<!--单选框结束-->

  <!--下拉选择开始-->
  <!--<ion-list>-->
    <!--<ion-item>-->
      <!--<ion-label>Gender</ion-label>-->
      <!--<ion-select placeholder="Select One" multiple="true" cancelText="取消" okText="确定">-->
        <!--<ion-select-option value="f">Female</ion-select-option>-->
        <!--<ion-select-option value="m">Male</ion-select-option>-->
      <!--</ion-select>-->
    <!--</ion-item>-->



  <!--</ion-list>-->
<!--下拉选择结束-->

  <!--按钮组件开始-->
<!--<ion-list>-->
  <!--<ion-item>-->
    <!--<ion-label>按钮组件</ion-label>-->
    <!--<ion-button color="danger" expand="block" shape="round" size="large">按钮组件</ion-button>-->
  <!--</ion-item>-->
<!--</ion-list>-->

  <!--按钮组件结束-->

<!--chip组件开始-->
  <!--<ion-chip color="danger">-->
    <!--<ion-label>用户名</ion-label>-->
    <!--<ion-icon name="person-outline"></ion-icon>-->
  <!--</ion-chip>-->
<!--chip组件结束-->

  <!--图形组件-->
  <!--<ion-avatar>-->
  <!--<ion-img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587361265802&di=1784583b17212fab2580a14cb1e2b47e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F11%2F20180611104357_asqmn.jpg">-->


  <!--</ion-img>-->
  <!--</ion-avatar>-->
<!--图形组件-->

<!--输入组件开始-->
  <!--<ion-item>-->
    <!--<ion-label position="stacked">用户名</ion-label>-->
    <!--<ion-input placeholder="在这里输入用户名"></ion-input>-->
  <!--</ion-item>-->


  <!--<ion-item>-->
    <!--<ion-label position="stacked">留言内容</ion-label>-->
    <!--<ion-textarea placeholder="在这里输入留言内容" rows="4"></ion-textarea>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
    <!--<ion-label position="stacked">出生日期</ion-label>-->
    <!--<ion-datetime displayFormat="YYYY-MM-DD" value="2012-12-15T13:47:20.789"></ion-datetime>-->

  <!--</ion-item>-->
<!--输入组件结束-->
  <!--栅格化开始-->

  <!--<ion-grid>-->
    <!--<ion-row>-->
      <!--<ion-col size="4">-->
        <!--<ion-avatar>-->
          <!--<ion-img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587361265802&di=1784583b17212fab2580a14cb1e2b47e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F11%2F20180611104357_asqmn.jpg">-->


          <!--</ion-img>-->
          <!--</ion-avatar>-->

      <!--</ion-col >-->
      <!--<ion-col size="8">-->
        <!--<ion-row>-->
          <!--<ion-col>姓名</ion-col>-->
          <!--<ion-col>杨幂</ion-col>-->
        <!--</ion-row>-->

        <!--<ion-row>-->
          <!--<ion-col>身高</ion-col>-->
          <!--<ion-col>1.68</ion-col>-->
        <!--</ion-row>-->
        <!--<ion-row>-->
          <!--<ion-col>体重</ion-col>-->
          <!--<ion-col>60</ion-col>-->
        <!--</ion-row>-->


      <!--</ion-col>-->



    <!--</ion-row>-->
    <!--<ion-row>-->
      <!--<ion-col>-->
        <!--<ion-button expand="full" color="danger">加为好友</ion-button>-->
      <!--</ion-col>-->
    <!--</ion-row>-->



  <!--</ion-grid>-->
<!--栅格化结束-->

  <ion-button (click)="presentActionSheet()">actionsheet</ion-button>
  <ion-button (click)="presentAlert()">警告框</ion-button>
  <ion-button (click)="presentAlertConfirm()">确认框</ion-button>
  <ion-button (click)="presentToast()">显示提示信息</ion-button>
  <ion-button (click)="presentToastByService()">封装提示信息测试</ion-button>



</ion-content>

<ion-footer>
 <ion-item>
   <ion-input placeholder="在这里输入消息"></ion-input>
   <ion-button>发送</ion-button>
 </ion-item>

</ion-footer>
